<template>
  <div class="sys-log-outer">
    <div class="log-header sys-log-bg">
      <span>日志告警详情表</span>
    </div>
    <div class="log-content">
      <div class="table-bid-box">
        <div class="table-title-box">
          <div class="table-title-p"
            v-for="item in titleList"
            :key='item'
            :style="{width: item.width != '0px' ? item.width : ''}"
          >
            <p>
            {{item.name}}
            </p>
          </div>
        </div>
        <div class="table-cotent-box">
          <vue3-seamless-scroll
          :hover-stop="true"
          :list="logList"
          :limitScrollNum="5"
          :hover="true"
          :step="0.2">
            <div class="table-content-p" v-for="(item,index) in logList" :key="index">
              <div class="biao-icon" :class="item['告警级别'] == '高' ? 'h-icon':(item['告警级别'] == '中'? 'm-icon':'b-icon')"></div>
              <div class="table-content-pbox" v-for='(itemes,indexes) in titleList' :key='indexes' :style="{width: itemes.width != '0px' ? itemes.width : ''}">
                <p v-if="itemes.name == '告警级别'" style="width:60px" :class="item['告警级别'] == '高' ? 'red':(item['告警级别']== '中'? 'yellow':'')">
                  {{item['告警级别']}}
                </p>
                <p v-if="itemes.name !== '告警级别' " :title="item[itemes.name]" >
                  {{ item[itemes.name] }}
                </p>
              </div>
            </div>
          </vue3-seamless-scroll>
        </div>
      </div>
      <!-- <table >
        <tr>
          <th></th>
          <th v-for="(item,index) in titleList" :key='index' :id='item.id'>{{item.name}}</th>
        </tr>
        <vue3-seamless-scroll
          :hover-stop="true"
          :list="logList"
          :hover="true"
          :step="0.8">
            <tr v-for="(item,index) in logList" :key="index">
              <td :class="item['告警级别'] == '高' ? 'h-icon':(item['告警级别'] == '中'? 'm-icon':'')"></td>
              <td v-for='(itemes,indexes) in titleList' :key='indexes'>
                <span v-if="itemes.name !== '告警级别'" >{{ item[itemes.name] }}</span>
                <span v-if="itemes.name == '告警级别'" :class="item['告警级别'] == '高' ? 'red':(item['告警级别']== '中'? 'yellow':'')">
                  {{item['告警级别']}}
                </span>
              </td>
            </tr>
        </vue3-seamless-scroll>
      </table> -->

    </div>
    <div class="log-footer"></div>
  </div>
</template>

<script>
import http from "@/api/api-index";

export default {
  name: 'SystemLog',
  props:{
    logList:{
      type:Array,
      default() {
        return []
      }
    },
    titleList:{
      type:Array,
      default() {
        return []
      }
    },
    widthList:{
      type:Array,

      default() {
        return []
      }
    }
  },
  watch:{
		titleList:{
			handler(newv){
				// console.log(newv)
			},
			immediate: true, // 重点
			deep: true, // 重点
    }
	}
}
</script>

<style lang="scss" scoped>
.sys-log-outer{
  width: calc(100% - 3rem);
  .log-footer{
    width: 100%;
    height: 0.02rem;
    background: url("../assets/table-img@2x.png")no-repeat;
    background-size: 100% 100%;
  }
  .log-header{
    width: 100%;
    height: 0.5rem;
    background: url("../assets/title-bg@2x.png")no-repeat;
    background-size: 100% 100%;
    font-size: 0.2rem;
    span{
      margin-left: 0.5rem;
      line-height: 0.5rem;
      width: 1.48rem;
      height: 0.27rem;
      font-family: MicrosoftYaHeiSemibold;
      color: #FFFFFF;
      letter-spacing: 0.0105rem;
      text-align: center;
      font-weight: 600;
    }
  }
  //表格内容
  .log-content{
    width: 100%;
    .table-bid-box{
      width: 100%;
      overflow: hidden;
      overflow-x: auto;

      .table-title-box{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        padding-left: 0.36rem;
        .table-title-p{
          // width: 100%;
          padding: 0.08rem 0.12rem 0.08rem 0;
          p{
            font-size: 0.14rem;
            box-sizing: border-box;
            color: #8FD6FF;
            /*这里要显示的设置宽度*/
            overflow:hidden;
            white-space:nowrap;
            /*文字超出宽度则显示ellipsis省略号*/
            text-overflow:ellipsis;
          }
        }
      }
      .table-cotent-box{
        width: 100%;
        max-height: 2rem;
        height: 2rem;
        overflow-y: auto;
        &::-webkit-scrollbar{
          width: 0!important;
        }
        .table-content-p{
          width: 100%;
          display: flex;
          flex-direction: row;
          .h-icon{
            background-image: url("../assets/icon-red@2x.png");
          }
          .m-icon{
            background-image: url("../assets/icon-yellow@2x.png");
          }
          .b-icon{
            background-image: url("../assets/icon-blue@2x.png");
          }
          .biao-icon{
            background-size: 0.24rem;
            padding-right: 0.05rem;
            background-position: center;
            background-repeat: no-repeat;
            padding: 0.08rem 0.12rem;
            background-color: rgb(1,21,48);
            margin-right: 0.12rem;
          }
          .table-content-pbox{
            display: block;
            padding: 0.08rem 0.12rem 0.08rem 0;
            p{
              font-family: MicrosoftYaHei;
              font-size: 0.16rem;
              color: #FFFFFF;
              letter-spacing: 0;
              line-height: 0.22rem;
              font-weight: 400;
              /*这里要显示的设置宽度*/
              overflow:hidden;
              white-space:nowrap;
              /*文字超出宽度则显示ellipsis省略号*/
              text-overflow:ellipsis;
            }
            .red{
              color: #DC1C1C;
            }
            .yellow{
              color: #FFBB1A;
            }
          }
        }
        .table-content-p:nth-child(even){
          background-color: rgba(2,128,235,0.2);
        }
      }
    }
    .table-bid-box::-webkit-scrollbar{display:none}
    table{
      width: 100%;
      max-height: 2.80rem;
      th{
        color: #8FD6FF;
        text-align: left;
      }
      tr:nth-child(even){
        background-color: rgba(2,128,235,0.2);
      }
      td:first-child{
        background-size: 0.24rem;
        padding-right: 0.05rem;
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgb(1,21,48);
      }
      tr,th,td{
        max-width: 4.80rem;
        padding: 0.08rem 0.12rem;
        /*这里要显示的设置宽度*/
        overflow:hidden;
        white-space:nowrap;
        /*文字超出宽度则显示ellipsis省略号*/
        text-overflow:ellipsis;
      }
      .h-icon{
        background-image: url("../assets/icon-red@2x.png");
      }
      .m-icon{
        background-image: url("../assets/icon-yellow@2x.png");
      }
      //标题
      #table-log,#log-msg,{
        width: 4.8rem;
        height: 0.22rem;
      }
      #table-time{
        width: 0.64rem;
      }
      #level{
        width: 1.8rem;
      }
      td,span{
        max-width: 4.80rem;
        height: 0.22rem;
        font-family: MicrosoftYaHei;
        font-size: 0.16rem;
        color: #FFFFFF;
        letter-spacing: 0;
        line-height: 0.22rem;
        font-weight: 400;
        .red{
          color: #DC1C1C;
        }
        .yellow{
          color: #FFBB1A;
        }
        :hover{
          width: 100%;
          //overflow: visible;
          //white-space: pre-line;
        }
      }
    }
  }
}
</style>
